<!DOCTYPE html>
<html lang="en">

<head>
    <title>颜色突变</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./mutation.css" />
</head>

<body>
    <div class="header">
        <span class="reduce img">-</span>
        <span class="add img">+</span>
        <span class="title-big">CSS中颜色突变的实现方案</span>
    </div>
    <div class="layout">
        <!--  第一种方案-->
        <div class="contain box1">
            <div class="descript">
                <span class="title">方案1: </span>多个元素组合 
                <span class="green"><br>此方案优点：
                <br> 1:原理直观，易理解；
                <br> 2:可以实现任意多颜色的条纹效果；</span>
                <p class="red"><br> 此方案缺点：
                <br> 1；添加了较多冗余的元素；</p>
            </div>
        </div>
        <!--  第二种方案-->
        <div class="contain box2">
            <div class="descript">
                <span class="title">方案2: </span>插入颜色渐变辅助色标 
            </div>
            <div class="article">
                    <span class="step step2-1">
                    </span>
                    <p>
                        <span>1:定义从颜色1到颜色2的渐变；</span><br>
                        <span class="back">background-image:</span>
                        linear-gradient(to right, red 0%, blue 100%);
                    </p>
                    <span class=" step step2-2">
                   </span>
                   <p>
                        <span>2:插入颜色1和颜色2的实色辅助色标；</span><br>
                    <span class="back">background-image:</span>
                    linear-gradient(to right, red 0%,red 40%,blue 60%, blue 100%);
                    </p>
                   <span class=" step step2-3">
                    </span>
                    <p>
                           
                        <span> 3:把实色辅助色标放在同一位置； </span><br>
                    <span class="back">background-image:</span>
                   linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
                    </p>
                    <p class="green">
                            此方案优点：<br> 
                            1:用单个元素实现，不用添加冗余元素；<br> 
                            2:可以实现任意多颜色的突变；
                    </p>
               
            </div>
        </div>

       <!--  第三种方案-->
        <div class="contain box3">
                <div class="descript">
                        <span class="title">方案3: </span>非重复的2色渐变
                    </div>
                    <div class="article">
                            <span class="step step3-1">
                            </span>
                            <p>
                                <span>1:定义从颜色1到颜色2的渐变；</span><br>
                                <span class="back">background-image:</span>
                                linear-gradient(to right, red 0%, blue 100%);
                            </p>
                            <span class=" step step3-2">
                           </span>
                           <p>
                                <span>2:把色标1与色标2向突然位置靠拢；</span><br>
                            <span class="back">background-image:</span>
                            linear-gradient(to right, red 0%,red 40%,blue 60%, blue 100%);
                            </p>
                           <span class=" step step3-3">
                            </span>
                            <p>
                                   
                                <span> 3:把色标1和色标2放在同一位置； </span><br>
                            <span class="back">background-image:</span>
                             linear-gradient(to right, red 50%, blue 50%);
                            </p>
                            <p class="green">
                                    此方案优点：<br> 
                                    1:用单个元素实现，不用添加冗余元素；<br> 
                                    2:可不用添加辅助色标；
                            </p>
                            <p class="red"> 此方案缺点：<br> 
                                    只能用非重复渐变实现；<br> 
                                    只能实现2个颜色的突变；
                                </p>
                       
                    </div>



    </div>
    <script src="./mutation.js"></script>
</body>

</html>